import _ from 'lodash';
import React from 'react';
import { Icon } from 'antd';
import { WeaLocaleProvider } from 'ecCom';
import { ruleTypes } from '../../../../../constants/form';

const { getLabel } = WeaLocaleProvider;
const formatMultiLang = WeaLocaleProvider.formatMultiLang;

export default class RuleItem extends React.Component {
  static defaultProps = {
    className: '',
    rule: { },
    onClick: () => { },
    onDelete: () => { }
  };

  onDelete = e => {
    e.stopPropagation();
    this.props.onDelete();
  }

  formatTarget(target) {
    if (_.isString(target)) return target;
    if (_.isArrayLikeObject(target)) return target.map(t => t.name).join(' ');

    return '';
  }

  render() {
    const { rule, className, onClick } = this.props;
    const { trigger, option, target, type } = rule;
    
    return (
      <div
        className={`wea-edc-rule-item ${className}`}
        onClick={onClick}
      >
        <p><span>{getLabel(503926,'如果')}:</span>{`${getLabel('24233','在') } "${formatMultiLang(trigger.name)}" ${getLabel(503929,'选择了')} "${formatMultiLang(option.showname)}"`}</p>
        <p><span>{ruleTypes.FIELD === type ? getLabel(503933,'就显示')+':' : getLabel(503934,'就跳转')+':' }</span>{formatMultiLang(this.formatTarget(target))}</p>
        <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@gl3ch2`} type='cross' onClick={this.onDelete} />
      </div>
    )
  }
}